<!-- Button to trigger modal -->
<!-- Modal -->

<div id="AddEvent" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <%= render partial: 'help/help_event_new' %>
        <h4 id="AddCategoryLabel"><%= t('event.main_title')%></h4>
      </div>


      <div class="modal-body" style="overflow:hidden;">
        <%= form_for Event.new(:owner_id => profile_or_current_subject.actor_id, :interval => 1) do |f| %>
          <%= f.hidden_field :owner_id %>
          <%= f.hidden_field :start_at %>
          <%= f.hidden_field :end_at %>
          <%= f.hidden_field :all_day %>
          <!--TITULO-->
          <label><%= t('event.leyend.title')%></label>
          <%= f.text_field :title, :class => "form-control", :placeholder => t('event.title_input') %>

          <!--DESCRIPCION-->
          <label><%= t('event.leyend.description')%></label>
          <%= f.text_area :description, :class => "form-control", :rows => 4, :placeholder => t('event.description_input') %>

          <!--EMBED-->
          <label><%= t('document.options.embed')%></label>
          <%= f.text_area :embed, :class => "form-control", :rows => 5, :placeholder => t('embed.input'), :disabled => true %>

          <!--TYPE-->
          <label><%= t('event.leyend.type')%></label>
          <div class="checkbox">
             <label>
               <%= f.radio_button :streaming, false, checked: true %> <span class="lbl padding-0"> <%= t('event.type.videoconference') %> </span>
             </label>
             <label>
                <%= f.radio_button :streaming, true %> <span class="lbl padding-0"> <%= t('event.type.streaming') %> </span>
             </label>
          </div>

          <!--DATE-->
          <label><%= t('event.leyend.fecha')%></label>
          <div id="date" class="input-group">
            <input class="form-control" data-format="yyyy-MM-dd" type="text" name="event_day">
            <span class="input-group-addon">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-calendar" ></i>
            </span>
          </div>
          <!--HORA INICIO-->
          <label><%= t('event.leyend.Hora de Inicio')%></label>
          <div id="hourinit" class="input-group">
            <input class="form-control" data-format="hh:mm:ss" type="text" name="event_start_time">
            <span class="input-group-addon">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-clock-o"></i>
            </span>
          </div>
          <!--HORA FINALIZACION-->
          <label><%= t('event.leyend.Hora de Finalizacion')%></label>
          <div id="hourfinish" class="input-group">
            <input class="form-control" data-format="hh:mm:ss" type="text" name="event_end_time">
            <span class="input-group-addon">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-clock-o"></i>
            </span>
          </div>

        <%content_for :javascript do%>
          $('#hourinit').datetimepicker({
            pickDate: false
          });

          $('#hourfinish').datetimepicker({
            pickDate: false
          });

          $('#date').datetimepicker({
            pickTime: false
          });

            $("#event_streaming_false").on("click", function() {
              $("#event_embed").attr("disabled", true);
            });
            $("#event_streaming_true").on("click", function() {
              $("#event_embed").attr("disabled", false);
            });

            if ($("#event_streaming_true").is(':checked')) {
              $("#event_embed").attr("disabled", false);
            }

          <%end%>

          <script>
            document.addEventListener("DOMContentLoaded", function(){
              var saveEventButton = $("#AddEvent input[type='submit']");
              var eventButton = $("#AddEvent input[value=<%= t('categories.save')%>][type='button'][class='btn btn-primary']");
              $(eventButton).click(function(event) {
                if ($("#AddEvent input[name='event[title]']").val() == "") {
                  $("#AddEvent .errors").remove();
                  $("#AddEvent .new_event").after("<div class='errors'><%= t('event.title_input')%></div>");
                } else {
                  // $("#AddEvent input[name='event[start_at]']").val($("#AddEvent input[name='event_day']").val() + " " + $("#AddEvent input[name='event_start_time']").val());
                  $("#AddEvent input[name='event[start_at]']").val(new Date(Date.parse($("#AddEvent input[name='event_day']").val().replace(/-/g,"/") + " " + $("#AddEvent input[name='event_start_time']").val())));

                  if ($("#AddEvent input[name='event_end_time']").val() < $("#AddEvent input[name='event_start_time']").val()) {
                    var d = new Date($("#AddEvent input[name='event_day']").val());
                    d.setDate(d.getDate()+1);
                    // $("#AddEvent input[name='event[end_at]']").val(d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + $("#AddEvent input[name='event_end_time']").val());
                    $("#AddEvent input[name='event[end_at]']").val(new Date(Date.parse(d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate() + " " + $("#AddEvent input[name='event_end_time']").val())).toUTCString());
                  } else {
                  // $("#AddEvent input[name='event[end_at]']").val($("#AddEvent input[name='event_day']").val() + " " + $("#AddEvent input[name='event_end_time']").val());
                  $("#AddEvent input[name='event[end_at]']").val(new Date(Date.parse($("#AddEvent input[name='event_day']").val().replace(/-/g,"/") + " " + $("#AddEvent input[name='event_end_time']").val())).toUTCString());
                  }
                  $(saveEventButton).click();
                }
              });
            });
          </script>

          <%= f.submit t('categories.save'), :id => "saveEvent", :class => "hidden" %>
        <% end %>
    </div><!-- CIERRA BODY-->

      <!-- FOOTER -->
      <div class="modal-footer">
        <input type="button" class="btn btn-primary" value="<%= t('categories.save')%>"/>
      </div><!-- /FOOTER -->
    </div><!-- /MODAL-CONTENT -->
  </div><!-- /MODAL-DIALOG -->
</div><!-- /MODAL -->
